<template>
  <div>
    <el-form ref="editFormRef" :rules="rules" :model="editForm.data" label-width="120">
      <el-row>
        <el-form-item label="设备厂家" prop="vendor">
          <el-select
            v-model="editForm.data.vendor"
            filterable
            style="width: 320px"
            placeholder="请选择设备厂家"
          >
            <el-option
              v-for="item in vendor.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input
            v-model="editForm.data.name"
            style="width: 320px"
            placeholder="请输入设备名称"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="使用状态" prop="status">
          <el-select
            v-model="editForm.data.status"
            filterable
            style="width: 320px"
            placeholder="请选择使用状态"
          >
            <el-option
              v-for="item in status.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="诱导屏级别" prop="level">
          <el-select
            v-model="editForm.data.level"
            filterable
            style="width: 320px"
            placeholder="请选择诱导屏级别"
          >
            <el-option
              v-for="item in level.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="屏幕宽度" prop="width">
          <el-input
            v-model="editForm.data.width"
            style="width: 320px"
            placeholder="请输入屏幕宽度"
          />
        </el-form-item>
        <el-form-item label="屏幕高度" prop="height">
          <el-input
            v-model="editForm.data.height"
            style="width: 320px"
            placeholder="请输入屏幕高度"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="分辨率" prop="rp">
          <el-select
            v-model="editForm.data.rp"
            filterable
            style="width: 320px"
            placeholder="请选择分辨率"
          >
            <el-option
              v-for="item in rp.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备位置" prop="address">
          <el-input
            v-model="editForm.data.address"
            style="width: 320px"
            placeholder="请输入设备位置"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item
          label="设备经度纬度"
          prop="longLatItude"
          style="margin-bottom: -6px !important"
        >
          <el-form-item prop="longitude">
            <el-input
              v-model="editForm.data.longitude"
              style="width: 150px; margin-right: 20px"
              placeholder="请输入设备经度"
            />
          </el-form-item>
          <el-form-item prop="latitude">
            <el-input
              v-model="editForm.data.latitude"
              style="width: 150px"
              placeholder="请输入设备纬度"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item label="联网模式" prop="netPattern">
          <el-select
            v-model="editForm.data.netPattern"
            filterable
            style="width: 320px"
            placeholder="请选择联网模式"
            @change="changeNetPattern"
          >
            <el-option
              v-for="item in netPattern.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="IMEI" prop="imei">
          <el-input
            v-model="editForm.data.imei"
            style="width: 320px"
            placeholder="请输入IMEI"
          />
        </el-form-item>
        <el-form-item label="IP地址" prop="ip">
          <el-input
            v-model="editForm.data.ip"
            style="width: 320px"
            placeholder="请输入IP地址"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="端口号" prop="port">
          <el-input
            v-model="editForm.data.port"
            style="width: 320px"
            placeholder="请输入端口号"
          />
        </el-form-item>
      </el-row>
      <el-form-item>
        <div class="footer">
          <div></div>
          <div>
            <el-button class="reset-btn" @click="resetForm(editFormRef)">取 消</el-button>
            <el-button class="confirm-btn" @click="submitForm(editFormRef)"
              >确 认</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
const emits = defineEmits(["operationDone"]);
import { getEditGuide } from "../request.js";

const props = defineProps({
  listData: {
    type: Object,
    default: () => {},
  },
  operationId: {
    type: Object,
    default: () => {},
  },
});

const editFormRef = ref("");
const editForm = reactive({
  data: {
    id: props.operationId.id,
    vendor: props.operationId.vendorId,
    name: props.operationId.name,
    status: props.operationId.status,
    level: props.operationId.level,
    width: props.operationId.width,
    height: props.operationId.height,
    rp: props.operationId.rp,
    address: props.operationId.address,
    longLatItude: 1,
    longitude: props.operationId.longitude,
    latitude: props.operationId.latitude,
    netPattern: props.operationId.netPattern,
    imei: props.operationId.imei,
    ip: props.operationId.ip,
    port: props.operationId.port,
  },
});

const vendor = reactive({
  data: [],
});

const status = reactive({
  data: [],
});

const level = reactive({
  data: [],
});

const rp = reactive({
  data: [],
});

const netPattern = reactive({
  data: [],
});

onMounted(() => {
  //   setTimeout(() => {
  vendor.data = props.listData.vendor;
  status.data = props.listData.status;
  level.data = props.listData.level;
  rp.data = props.listData.rp;
  netPattern.data = props.listData.netPattern;
  //   const [width, height] = props.operationId.screenSize.split("*");
  //   editForm.data.width = width;
  //   editForm.data.height = height;
  //   }, 500);
  if (props.operationId.netPattern === 1) {
    changeNetPattern(1);
  } else if (props.operationId.netPattern === 2) {
    changeNetPattern(2);
  } else {
    changeNetPattern(3);
  }
});

const changeNetPattern = (val) => {
  console.log("val ===>", val);
  if (val === 1) {
    rules.imei = [{ required: true, message: "请输入IMEI", trigger: "blur" }];
    rules.ip = [];
    rules.port = [];
  } else if (val === 2) {
    rules.imei = [];
    rules.ip = [{ required: true, message: "请输入IP地址", trigger: "blur" }];
    rules.port = [{ required: true, message: "请输入端口号", trigger: "blur" }];
  } else {
    rules.imei = [];
    rules.ip = [];
    rules.port = [];
  }
};

const rules = reactive({
  vendor: [{ required: true, message: "请选择设备厂家", trigger: "change" }],
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  status: [{ required: true, message: "请选择使用状态", trigger: "change" }],
  level: [{ required: true, message: "请选择诱导屏级别", trigger: "change" }],
  width: [{ required: true, message: "请输入屏幕宽度", trigger: "blur" }],
  height: [{ required: true, message: "请输入屏幕高度", trigger: "blur" }],
  rp: [{ required: true, message: "请选择分辨率", trigger: "change" }],
  address: [{ required: true, message: "请输入设备位置", trigger: "blur" }],
  longLatItude: [{ required: true, message: "", trigger: "blur" }],
  longitude: [{ required: true, message: "请输入路段经度", trigger: "blur" }],
  latitude: [{ required: true, message: "请输入路段纬度", trigger: "blur" }],
  netPattern: [{ required: true, message: "请选择联网模式", trigger: "change" }],
  imei: [],
  ip: [],
  port: [],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      getEditGuide(editForm.data).then((res) => {
        if (res.data.code === 0) {
          ElMessage({
            type: "success",
            message: res.data.result,
          });
          emits("operationDone");
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  editForm.data = {};
  formEl.resetFields();
  emits("operationDone");
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
